<!-- src/views/home/components/WhrTab WhrTab.vue 2023/5/25  @wanghaoran -->
<template>
  <div class="whr-tab">
    <div v-for="(item, index) in tabData" :key="index" class="whr-tab-title pointer"
         @click="onTabItemClickHandler(item)"
         :class="[value===item.value?'whr-tab-title-activated':'']"
    >
      {{ item.label }}
    </div>
  </div>
</template>

<script setup>
import {computed} from "vue";

const props = defineProps({
  tabData: {
    type: Array,
    default: function () {
      return []
    }
  },
  modelValue: {
    type: String,
    default: '',
  }
})
const emit = defineEmits(['update:modelValue'])
const value = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})
const onTabItemClickHandler = (item) => {
  value.value = item.value
}
</script>

<style scoped>
.whr-tab {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.whr-tab-title {
  margin: 0 10px;
  position: relative;
}
.whr-tab-title-activated {
  font-weight: bold;
  color: #477CFB;
}
.whr-tab-title-activated::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  font-weight: bold;
  padding-bottom: 2px;
  border-bottom: 3px solid #477CFB;
  border-radius: 1px;
  color: #477CFB;
}
.pointer{
  cursor: pointer;
}
</style>